<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>209000405 胡才静 使用Vue指令实现数据展示</title>
    <script src="https://unpkg.com/vue@next"></script>
    <style>
        body {
            background-color: #d9d7d7;
        }
        .box {
            width: 1210px;
            margin: 50px auto 0px;
            background-color: #d9d7d7;
            height: 1600px;
        }

        .box_1 {
            /* 上方标题和更多 */
            width: 1210px;
            height: 20px;
        }

        .box_2 {
            /* 左边照片大div盒子 */
            width: 240px;
            height: 0px;
            margin-top: 10px;
            margin-left: 10px;
            background-color: #000000;
        }

        .box_3 {
            /* 右边手机照片大div盒子 */
            width: 1000px;
            height: 630px;
            margin-left: 170px;
            margin-top: -24px;
        }

        .phone_message {
            /* 每一个手机信息 */
            display: block;
            float: right;
            width: 200px;
            height: 300px;
            background-color: white;
            margin: 15px 0 0 30px;
            margin-top: 12px;
        }

        .png {
            /* 手机图片 */
            text-align: center;
            margin: 10px 0;
        }

        .title {
            /*标题*/
            font-size: 22px;
            color: #000000;
        }

        .phone_title {
            /* 手机名称 */
            text-decoration: none;
            color: #000000;
            text-align: center;
            font-size: 16px;
        }

        .des {
            /* 手机描述 */
            color: #7a7c79;
            font-size: 12px;
            text-align: center;
        }

        .price {
            /* 手机价格 */
            color: #ffac38;
            text-align: center;
            margin-top: 15px;
            font-weight: bold;
        }

        a {
            /* 清除所有a标签下划线 */
            text-decoration: none
        }

        .gengduo a {
            margin-left: 1020px;
            color: #000;
            font-size: 16px;
        }

        .gengduo a:hover {
            color: #ffac38;
        }
    </style>
</head>

<body><!--209000405 胡才静-->
    <div id="app"></div>
    <template id="root">

        <div class="box">
            <div class="box_1">
                <div class="title">手机 <span class="gengduo"><a href="#">查看更多></a></span></div>
            </div>
            <div>
                <div class="box_2">
                    <img src="images/ad1.png" width="240">
                </div>
                <div class="box_3">
                    <ul>
                        <!-- v-for遍历phoneList展示出手机信息 key值为手机id -->
                        <li class="phone_message" v-for="phone in phoneList" :key="phone.id">
                            <a href="#">
                                <div class="png"><!-- 手机图片 --><img :src="phone.img" width="150"></div>
                                <div class="phone_title"><!-- 手机名称-->{{phone.title}}</div>
                                <p class="des"><!-- 手机描述 -->{{phone.des}}</p>
                                <p class="price"><!-- 手机价格 -->
                                    <span>{{phone.price}}</span>元起
                                    <del v-if="phone.id==5" style="color: grey;">1999元</del>
                                    <del v-else-if="phone.id==8" style="color: grey;">999元</del>
                                </p>
                            </a>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </template>
    <script>
        const app = Vue.createApp({
            template: '#root',
            data() {
                return {
                    phoneList: [
                        { id: "1", img: "images/phone1.png", title: "Redmi K50 电竞版", des: "全线拉满的冷血旗舰", price: "3299" },
                        { id: "2", img: "images/phone2.png", title: "Xiaomi 12 Pro", des: "全新骁龙8｜2K AMOLED屏幕", price: "4699" },
                        { id: "3", img: "images/phone3.png", title: "Xiaomi 12", des: "全新骁龙8｜5000万主摄", price: "3699" },
                        { id: "4", img: "images/phone4.png", title: "Xiaomi 12X", des: "骁龙870｜5000万主摄", price: "2999" },
                        { id: "5", img: "images/phone5.png", title: "Xiaomi 11 青春活力版", des: "轻薄5G，内外皆出彩", price: "1899" },
                        { id: "6", img: "images/phone6.png", title: "Redmi Note 11 Pro系列", des: "三星AMOLED高刷屏", price: "1799" },
                        { id: "7", img: "images/phone7.png", title: "Redmi Note 11 5G", des: "5000mAh大电量", price: "1199" },
                        { id: "8", img: "images/phone8.png", title: "Redmi Note 11 4G", des: "5000mAh大电量", price: "969", },
                    ]
                }
            },
        })
        app.mount('#app')
    </script>
</body>

</html>